<template>
  <MrCustom bg-color="bg-gradual-blue" is-back>

  </MrCustom>
  <view style="padding-bottom: 10vh">
    <uni-forms ref="form" border :rules="rules" :modelValue="formData">
      <view class="cu-form-group">
        <uni-forms-item required>
          <view class="flex align-center">
            <view style="width: 20vw">
              <MrAvatar :src="formData.photo" :size="100"></MrAvatar>
            </view>
            <view @click="chooseImage" class="flex flex-sub justify-between  text-gray">
              <view>{{ formData.photo ? '编辑头像' : '添加头像' }}</view>
              <view class="cuIcon-right"></view>
            </view>
          </view>
        </uni-forms-item>
      </view>

      <view class="cu-form-group">
        <uni-forms-item required>
          <view class="flex align-center">
            <view class="title" style="width: 20vw">
              真实姓名
            </view>
            <view class="flex flex-sub">
              <uni-easyinput type="text" v-model="formData.realName" placeholder="请输入真实姓名"/>
            </view>
          </view>
        </uni-forms-item>
      </view>


      <view class="cu-form-group">
        <uni-forms-item required>
          <view class="flex flex-sub align-center justify-between">
            <view class="title" style="width: 20vw">
              性别
            </view>
            <view class="flex flex-sub">
              <uni-data-checkbox v-model="formData.sex" :localdata="sexs"></uni-data-checkbox>
            </view>
          </view>
        </uni-forms-item>
      </view>

      <view class="cu-form-group">
        <uni-forms-item required>
          <view class="flex flex-sub align-center justify-between">
            <view class="title" style="width: 20vw">出生日期</view>
            <view class="flex flex-sub">
              <uni-datetime-picker style="z-index: 9999" type="date" :clear-icon="false" v-model="formData.birth"/>
            </view>
          </view>
        </uni-forms-item>
      </view>

      <view class="cu-form-group">
        <uni-forms-item required>
          <view class="flex flex-sub align-center justify-between">
            <view class="title" style="width: 20vw">成员关系</view>
            <view class="flex flex-sub">
              <uni-data-select
                  style="width: 100%"
                  placeholder="请选择与成员关系"
                  v-model="formData.relationship"
                  :localdata="relationships"
              ></uni-data-select>
            </view>
          </view>
        </uni-forms-item>
      </view>
      <view class="cu-form-group">
        <uni-forms-item>
          <view class="flex align-center">
            <view class="title" style="width: 20vw">
              手机号
            </view>
            <view class="flex flex-sub">
              <uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号"/>
            </view>
          </view>
        </uni-forms-item>
      </view>
      <view class="cu-form-group">
        <uni-forms-item>
          <view class="flex align-center">
            <view class="title" style="width: 20vw">
              邮箱
            </view>
            <view class="flex flex-sub">
              <uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱"/>
            </view>
          </view>
        </uni-forms-item>
      </view>
      <view class="cu-form-group">
        <uni-forms-item>
          <view class="flex flex-sub align-center justify-between">
            <view class="title" style="width: 20vw">ABO血型</view>
            <view class="flex flex-sub">
              <uni-data-select
                  style="width: 100%"
                  placeholder="请选择ABO血型"
                  v-model="formData.aboBloodType"
                  :localdata="aboBloodTypes"
              ></uni-data-select>
            </view>
          </view>
        </uni-forms-item>
      </view>
      <view class="cu-form-group">
        <uni-forms-item>
          <view class="flex flex-sub align-center justify-between">
            <view class="title" style="width: 20vw">RH血型</view>
            <view class="flex flex-sub">
              <uni-data-select
                  style="width: 100%"
                  placeholder="请选择RH血型"
                  v-model="formData.rhBloodType"
                  :localdata="rhBloodTypes"
              ></uni-data-select>
            </view>
          </view>
        </uni-forms-item>
      </view>
    </uni-forms>
    <view class="text-df text-center text-gray padding">
      点击确认添加意为您已知悉并同意我们手机以上信息，并提供给平台内服务使用，用于确认服务对象
    </view>

    <view class="flex flex-sub flex-direction">
      <button class="cu-btn lg bg-blue" @click="update">确认保存</button>
      <button class="cu-btn lg bg-red text-red line margin-top" @click="remove">删除成员</button>
    </view>

  </view>
</template>

<script setup lang="ts">

import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import MrCustom from "@/components/common/MrCustom.vue";
import MrAvatar from "@/components/common/MrAvatar.vue";
import {uploadFile} from '/settings'
import api from "@/api";


const url = uploadFile.url
const name = uploadFile.name
const archiveInfo = ref()
onLoad((option) => {
  archiveInfo.value = JSON.parse(decodeURIComponent(option.archiveInfo))
  formData.value = archiveInfo.value
})

const formData = ref({
  photo: '',
  realName: '',
  birth: '',
  sex: '',
  relationship: '',
  phone: '',
  email: '',
  aboBloodType: '',
  rhBloodType: '',
})
const form = ref()
const rules = ref()


const sexs = ref([
  {
    text: '男',
    value: '男'
  }, {
    text: '女',
    value: '女'
  }
])
const relationships = ref([
  {value: '自己', text: "自己"},
  {value: '父母', text: "父母"},
  {value: '子女', text: "子女"},
  {value: '夫妻', text: "夫妻"},
  {value: '亲属', text: "亲属"},
  {value: '朋友', text: "朋友"},
])
const aboBloodTypes = ref([
  {value: 'A型', text: "A型"},
  {value: 'B型', text: "B型"},
  {value: 'AB型', text: "AB型"},
  {value: '0型', text: "0型"},
  {value: '不详', text: "不详"},
])
const rhBloodTypes = ref([
  {value: 'RH阳性', text: "RH阳性"},
  {value: 'RH阴性', text: "RH阴性"},
  {value: '不详', text: "不详"},
])

const remove = () => {
  api.archive.removeById({
    id: archiveInfo.value.id,
  }).then(res => {
    if (res && res.data.code === 0) {
      uni.navigateBack({
        success:()=>{
          uni.setStorageSync("archiveIndex",0)
        }
      })
    }
  })
}
const update = () => {
  api.archive.update({
    id: archiveInfo.value.id,
    ...formData.value
  }).then(res => {
    if (res && res.data.code === 0) {
      uni.showToast({
        title: res.data.msg
      })
    }
  })
}


const chooseImage = () => {
  uni.chooseImage({
    count: 1, //默认9
    success: (res) => {
      uni.uploadFile({
        url: url, //仅为示例，非真实的接口地址
        filePath: res.tempFilePaths[0],
        name: name,
        success: (uploadFileRes) => {
          let tmp = JSON.parse(uploadFileRes.data).data
          formData.value.photo = tmp
        }
      });
    }
  });
}
</script>

<style scoped>
/deep/ .uni-forms-item {
  width: 100%;
}
</style>